<template>
  <div class="container">
    <headerNav title="我的评论"></headerNav>
    <div class="my-comment" v-for="(item,index) of mycomments" :key="index">
      <div class="date">{{item.created_at}}</div>
      <div class="content">回复：{{item.content}}</div>
      <div class="post-origin" @click="toPost(item.news_id)">
        <div class="post">原文：{{item.news_title}}</div>
        <div class="icon">
          <i class="iconfont iconjiantou1"></i>
        </div>
      </div>
    </div>

    <div class="more-comment" @click="moreComment" v-if="isMoreComment">更多评论 >></div>
    <div class="more-comment no-more"  v-else>没有更多评论了 ！！！</div>
  </div>
</template>

<script>
import headerNav from "../components/headerNav";
export default {
  components: { headerNav },
  data() {
    return {
      page: 0,
      mycomments: [],
      isMoreComment: true,
    }
  },
  mounted() {
    this.moreComment()
  },
  methods: {
    async moreComment(){
      this.page ++ ;

      const res = await this.$api.getMyComments({page: this.page})
      console.log(res)
      //返回数据长度小于 pageSize，说明数据加载完毕
      this.mycomments = [
        ...this.mycomments,
        ...res.data.data
      ];
      
      //判断数据是否加载完毕
      this.isMoreComment = res.data.current_page >= res.data.last_page && false;
    },
    toPost(id){
      console.log(id)
      this.$router.push({
        name: 'postdetail',
        params: {
          id
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .container{
    .my-comment{
      padding: 5.556vw;
      border-bottom: 1px solid #ddd;

      .date,.parent,.post-origin{
        font-size: 3.889vw;
        color: #999;
      }

      .parent-content,.post{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      .date{
        margin-bottom: 4.167vw;
      }
      .parent{
        padding: 2.778vw 0 2.778vw 2.778vw;
        background-color: #e4e4e4;

        .parent-content{
          font-size: 4.167vw;
          padding-top: 2.778vw;
        }
      }

      .content{
        margin: 4.167vw 0;
      }

      .post-origin{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .post{
          flex: 1;
        }

        .icon{
          margin-left: 5.556vw;
        }
      }
    }

    .more-comment{
      width: 100%;
      font-size: 3.889vw;
      padding: 2.778vw 0;
      margin: 5.556vw 0 ;
      text-align: center;
      color: #999;
    }
    .no-more{
      background-color: #eee;
      margin: 0;
    }
  }
</style>